<template>
	<view class="sort-popup-component">
		<uni-popup ref="sortPopup" type="bottom" :mask-click="true" @close="onClose">
			<view class="popup-content sort-popup">
				<view class="popup-title">排序方式</view>

				<view class="picker-container">
					<!-- 排序项Picker -->
					<view class="picker-column">
						<!-- <text class="column-title">排序项</text> -->
						<picker-view class="picker-view" :value="[activeIndex[0]]"
							@change="handlePickerChange(0, $event)" @scroll="handlePickerScroll(0, $event)">
							<picker-view-column>
								<view class="picker-item" v-for="(item, index) in sortItems" :key="index">
									{{ item }}
								</view>
							</picker-view-column>
						</picker-view>
					</view>

					<!-- 排序方向Picker -->
					<view class="picker-column">
						<!-- <text class="column-title">排序方向</text> -->
						<picker-view class="picker-view" :value="[activeIndex[1]]"
							@change="handlePickerChange(1, $event)" @scroll="handlePickerScroll(1, $event)">
							<picker-view-column>
								<view class="picker-item" v-for="(item, index) in sortDirections" :key="index">
									{{ item }}
								</view>
							</picker-view-column>
						</picker-view>
					</view>
				</view>

				<view class="popup-buttons">
					<button class="cancel-btn" @click="onCancel">取消</button>
					<button class="confirm-btn" @click="onConfirm">确认</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import store from '@/store/index.js'
	export default {
		props: {
			selected: {
				type: Object,
				default() {
				  return {};
				}
			}
		},
		data() {
			return {
				sortItems: ['IMDb评分', '分辨率', '加入日期', '发行日期', '媒体容器', '年份', '播放日期', '播放时长', '播放次数', '文件名', '标题', '文件尺寸',
					'比特率', '随机'
				],
				sortDirections: ['↑', '↓'],
				sortDict: {
					"标题": "SortName",
					"IMDb评分": "CommunityRating,SortName",
					"分辨率": "Resolution,SortName",
					"加入日期": "DateCreated",
					"发行日期": "ProductionYear,PremiereDate,SortName",
					"媒体容器": "Container,SortName",
					"年份": "ProductionYear,SortName",
					"播放日期": "DatePlayed,SortName",
					"播放时长": "Runtime,SortName",
					"播放次数": "PlayCount,SortName",
					"文件名": "IsFolder,Filename",
					"文件尺寸": "Size,SortName",
					"比特率": "TotalBitrate,SortName",
					"随机": "Random"
				},
				defaultIndex: [0, 0],
				activeIndex: [0, 0],
				// 用于防抖处理滚动事件
				scrollTimer: null
			}
		},
		methods: {
			open() {
				console.log("当前选择的数据",this.selected)
				if(this.selected && this.selected.SortOrder){
					let SortOrderSe = 0
					if(this.selected.SortOrder == "Descending"){
						SortOrderSe = 1
					}
					this.activeIndex = [this.getSortNameIndex(this.selected.SortBy),SortOrderSe]
				}
				
				this.$refs.sortPopup.open()
			},
			close() {
				this.$refs.sortPopup.close()
			},
			getSortNameIndex(sortKey) {
			  let chineseName = null;
			  for (const [name, key] of Object.entries(this.sortDict)) {
			    if (key==sortKey) {
			      chineseName = name;
			      break;
			    }
			  }
			  if (!chineseName) {
			    // console.warn(`未找到英文简称 ${sortKey} 对应的中文名称`);
			    return 0;
			  }
			  const index = this.sortItems.indexOf(chineseName);
			  return index;
			},
			// 处理picker选中事件
			handlePickerChange(column, e) {
				const newIndex = [...this.activeIndex]
				newIndex[column] = e.detail.value[0]
				this.activeIndex = newIndex
			},
			// 处理滚动事件，实现滚动停止后自动选中置顶项
			handlePickerScroll(column, e) {
				// 清除之前的定时器
				if (this.scrollTimer) {
					clearTimeout(this.scrollTimer)
				}

				// 设置新的定时器，防抖处理
				this.scrollTimer = setTimeout(() => {
					const newIndex = [...this.activeIndex]
					newIndex[column] = e.detail.value[0]
					this.activeIndex = newIndex
				}, 300) // 300ms延迟，确保滚动停止后再触发
			},
			onConfirm() {
				const sortItem = this.sortItems[this.activeIndex[0]]
				const sortDirection = this.sortDirections[this.activeIndex[1]]

				const result = {
					SortBy: this.sortDict[sortItem] || '',
					SortOrder: sortDirection === "↑" ? "Ascending" : "Descending",
					index: [...this.activeIndex],
					label: `${sortItem} ${sortDirection}`
				}
				store.commit('sortParams', result)
				uni.setStorageSync('sortParams', JSON.stringify(result))
				this.$emit('confirm', result)
				this.close()
			},
			onCancel() {
				this.activeIndex = [...this.defaultIndex]
				this.close()
			},
			onClose() {
				this.$emit('close')
			}
		}
	}
</script>

<style scoped>
	.popup-content {
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
		padding: 30rpx;
		max-height: 80vh;
		display: flex;
		flex-direction: column;
		padding-bottom: env(safe-area-inset-bottom);
		box-sizing: border-box;
		justify-content: center;
	}

	.popup-title {
		font-size: 36rpx;
		font-weight: bold;
		text-align: center;
		margin-bottom: 30rpx;
		padding-bottom: 15rpx;
		border-bottom: 1px solid #eee;
		height: 40rpx;
		color: #333;
	}

	.picker-container {
		flex: 1;
		display: flex;
		justify-content: space-between;
		padding: 20rpx 0;
		min-height: 300rpx;
	}

	.picker-column {
		flex: 1;
		display: flex;
		flex-direction: column;
		margin: 0 10rpx;
	}

	.column-title {
		font-size: 28rpx;
		color: #666;
		padding: 10rpx 0;
		text-align: center;
		border-bottom: 1px solid #eee;
	}

	.picker-view {
		flex: 1;
		width: 100%;
		/* 确保picker有足够高度显示多个选项 */
		min-height: 240rpx;
	}

	.picker-item {
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 32rpx;
		color: #000;
		opacity: 0.7;
		/* font-weight: bold; */
	}

	/* 选中项的样式 */
	::v-deep .uni-picker-view-indicator {
		height: 80rpx;
		/* border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  background-color: rgba(245, 248, 255, 0.5); */
	}

	/* 选中项文本样式 */
	::v-deep .uni-picker-view-selected {
		color: #2979ff;
		font-size: 34rpx;
		opacity: 1;
		font-weight: bold;
	}

	.popup-buttons {
		display: flex;
		border-radius: 50px;
		margin-top: 13px;
		/* width: 100vw; */
		height: 40px;
		color: #ffffff;
		font-size: 14px;
		overflow: hidden;
		justify-content: center;
	}

	.cancel-btn {
		flex: 1;
		background: linear-gradient(271deg, #2698fb 0%, #84c6ff 100%);
		display: flex;
		justify-content: center;
		align-items: center;
		padding-left: 0;
		padding-right: 0;
		border-radius: 0;
	}

	.confirm-btn {
		flex: 1;
		background: linear-gradient(90deg, #0066ff 0%, #1371ff 100%);
		display: flex;
		justify-content: center;
		align-items: center;
		padding-left: 0;
		padding-right: 0;
		border-radius: 0;
	}

	.cancel-btn {
		background-color: #f5f5f5;
		color: #fff;
	}

	.confirm-btn {
		background-color: #2979ff;
		color: #fff;
	}

	.picker-label {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 20rpx;
	}

	@media (max-device-width: 768px) and (-webkit-min-device-pixel-ratio: 2) {
		.popup-content {
			padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
		}
	}
</style>